<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->

<template>
  <div class="min-h-screen bg-gray-50 p-8">
    <div class="mx-auto">
      <div class="bg-white rounded-lg shadow">
        <el-table
          :data="tableData"
          style="width: 100%"
          :header-cell-style="{ background: '#f0f7ff', color: '#333' }"
          :row-class-name="tableRowClassName"
        >
          <el-table-column prop="code" label="生产单号" />
          <el-table-column prop="productType" label="产品类型" />
          <el-table-column prop="productName" label="产品名称" />
          <el-table-column prop="qty" label="制令数量">
            <template #default="scope">
              <div>
                {{ scope.row.qty }}
                {{ unitFormat(scope.row.unit) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态">
            <template #default="scope">
              <div class="whitespace-nowrap">
                {{ getStatusType(scope.row.status) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button
                v-if="scope.row.status >= 5"
                type="primary"
                link
                class="!rounded-button whitespace-nowrap"
                @click="handleInspect(scope.row)"
                v-hasPerm="'sys:qualityControl:edit'"
              >
                抽检
              </el-button>
              <el-button
                type="primary"
                link
                class="!rounded-button whitespace-nowrap"
                @click="handleViewDetails(scope.row)"
              >
                查看报告
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-dialog
          v-model="dialog.visible"
          :title="dialog.title"
          width="1000px"
          class="df"
          @close="dialogClose"
        >
          <el-form
            ref="dialogFormRef"
            :model="paramsInfo"
            :inline="true"
            label-width="130px"
            disabled
          >
            <el-row>
              <el-col :span="12">
                <el-form-item label="生产批次号" prop="parentCode">
                  <el-input
                    v-noSpace
                    v-model="paramsInfo.parentCode"
                    placeholder="请输入生产批次号"
                    clearable
                    maxlength="100"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="产品类型" prop="productCategory">
                  <el-input
                    v-noSpace
                    v-model="paramsInfo.productCategory"
                    placeholder="请输入产品类型"
                    clearable
                    maxlength="100"
                  />
                  <!-- <el-select
                v-model="paramsInfo.productType"
                placeholder="请选择原材料类型"
                style="width: 192px"
              >
                <el-option
                  v-for="item in materialTypes"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select> -->
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="产品编号" prop="productCode">
                  <el-input
                    v-noSpace
                    v-model="paramsInfo.productCode"
                    placeholder="请输入产品编号"
                    clearable
                    maxlength="100"
                  />
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="产品名称" prop="productName">
                  <el-input
                    v-noSpace
                    v-model="paramsInfo.productName"
                    placeholder="请输入产品名称"
                    clearable
                    maxlength="100"
                  />
                </el-form-item>
              </el-col>

              <!-- <el-col :span="12">
                <el-form-item label="供应商编号" prop="supplierCode">
                  <el-input v-noSpace
                    v-model="paramsInfo.supplierCode"
                    placeholder="请输入供应商编号"
                    clearable
                    maxlength="100"
                  />
                </el-form-item>
              </el-col> -->

              <!-- <el-col :span="12">
                <el-form-item label="供应商名称" prop="supplierName">
                  <el-input v-noSpace
                    v-model="paramsInfo.supplierName"
                    placeholder="请输入供应商名称"
                    clearable
                    maxlength="100"
                  />
                </el-form-item>
              </el-col> -->

              <!-- <el-col :span="12">
                <el-form-item label="采购数量" prop="purchaseQuantity">
                  <el-input v-noSpace
                    v-model.number="paramsInfo.purchaseQuantity"
                    placeholder="请输入采购数量"
                    clearable
                    maxlength="100"
                  />
                </el-form-item>
              </el-col> -->

              <el-col :span="12">
                <el-form-item :label="`实际数量(${unitValue.label})`" prop="actual_quantity">
                  <el-input
                    v-noSpace
                    v-model.number="paramsInfo.actualQuantity"
                    placeholder="请输入实际数量"
                    clearable
                    maxlength="100"
                  />
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item :label="`合格数量(${unitValue.label})`" prop="qualified_quantity">
                  <el-input
                    v-noSpace
                    v-model.number="paramsInfo.qualifiedQuantity"
                    placeholder="请输入合格数量"
                    clearable
                    maxlength="100"
                  />
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="合格率" prop="qualified_rate">
                  <el-input
                    v-noSpace
                    v-model="paramsInfo.qualifiedRate"
                    disabled
                    placeholder="请输入合格率"
                    clearable
                    maxlength="100"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="质检状态" prop="status">
                  <el-select
                    v-model="paramsInfo.status"
                    placeholder="请选择质检状态"
                    style="width: 192px"
                  >
                    <el-option
                      v-for="item in statesList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="实物图片" prop="physicalImage">
                  <FileUpload
                    v-model="physicalImage"
                    :showUploadBtn="false"
                    :showDelBtn="false"
                    :data="{ bizType: 'contract' }"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="报告图片" prop="reportImage">
                  <FileUpload
                    v-model="reportImage"
                    :showUploadBtn="false"
                    :showDelBtn="false"
                    :data="{ bizType: 'contract' }"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="质检人" prop="reportName">
                  <el-input
                    v-noSpace
                    v-model="paramsInfo.reportName"
                    placeholder="请输入质检人"
                    clearable
                    maxlength="100"
                  />
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="质检时间" prop="reportTime">
                  <el-date-picker
                    v-model="paramsInfo.reportTime"
                    placeholder="请输入质检时间"
                    type="date"
                    format="YYYY/MM/DD"
                    value-format="YYYY-MM-DD"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>

          <!-- <template #footer>
        <span class="dialog-footer df">
          <el-button :disabled="subDisabled" type="primary" @click="submitDialog">确 定</el-button>
        </span>
      </template> -->
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import qualityControlAPI, { ReportControl, Tabulation } from "@/api/quality/qualityControl";
import configApi, { ConfigType } from "@/api/config/config";
import qualityAPI, {
  QualityControlInquire,
  QualityControlInfo,
  QualityControlTab,
} from "@/api/quality/quality";

const loading = ref(false);

const physicalImage = ref();
const reportImage = ref();
const tableData = ref<Tabulation[]>([]);
const queryParams = reactive<QualityControlInquire>({
  pageNum: 1,
  pageSize: 10,
  // qualityType: 1,
});
const dialog = reactive({
  title: "",
  visible: false,
  type: "",
});
// 表单数据
const paramsInfo = reactive<QualityControlInfo>({});
const statesList = ref([
  {
    label: "待检验",
    value: 0,
  },
  {
    label: "检验中",
    value: 1,
  },
  {
    label: "检验通过",
    value: 2,
  },
  {
    label: "检验不通过",
    value: 3,
  },
]);
const getStatusType = (status: number) => {
  const statusMap: Record<number, string> = {
    0: "待检验/待确认",
    1: "检验中/已确认",
    2: "检验通过",
    3: "检验不通过/准备中",
    4: "待生产",
    5: "生产中",
    6: "生产完成",
    7: "暂停",
  };

  return statusMap[status] || "待检验";
};
// 获取列表数据
function getInfo() {
  loading.value = true;
  qualityControlAPI
    .getTodayProdStatus()
    .then((data) => {
      console.log(data);
      tableData.value = [...(data as any)];
    })
    .finally(() => {
      loading.value = false;
    });
}

const tableRowClassName = ({ row, rowIndex }: { row: Tabulation; rowIndex: number }) => {
  return rowIndex % 2 === 0 ? "bg-white" : "bg-gray-50";
};

const handleInspect = (row: Tabulation) => {
  let data = reactive<ReportControl>({
    parentCode: row.code,
  });
  qualityControlAPI
    .saveOrUpdateProdReportControl(data)
    .then((data) => {
      console.log(data);
      getInfo();
    })
    .finally(() => {});
};

const handleViewDetails = (row: any) => {
  queryParams.parentCode = row.code;
  console.log(queryParams);
  qualityAPI
    .getPage(queryParams)
    .then((data) => {
      console.log(data);
      if (data?.list.length == 0) {
        ElMessage.info(`暂无详情`);
      } else {
        dialog.visible = true;

        if (data?.list[0].physicalImage) {
          physicalImage.value = data?.list[0].physicalImage.map((item: any) => {
            return {
              name: item.split("/").pop(),
              url: item,
            };
          });
        } else {
          physicalImage.value = [];
        }
        if (data?.list[0].reportImage) {
          reportImage.value = data?.list[0].reportImage.map((item: any) => {
            return {
              name: item.split("/").pop(),
              url: item,
            };
          });
        } else {
          reportImage.value = [];
        }
        Object.assign(paramsInfo, { ...data?.list[0] });
        console.log(paramsInfo);
        unitValue.value.label = unitFormat(paramsInfo.unit);
        console.log(unitValue);
        console.log(paramsInfo.actualQuantity);
        // paramsInfo.value = [...(data?.list as any)];
      }
      // tabData.value = [...(data?.list as any)];
      // total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
  // ElMessage.info(`查看详情: ${row.code}`);
};
function dialogClose() {
  dialog.visible = false;
}
// 选中产品单位值
const unitValue = ref<{ label?: string; value?: string }>({});
// 单位常量列表
const unitOptions = ref<Array<{ label: string; value: string }>>([]);
const unitFormat = (unit: any) => {
  if (!unit) return;
  let unitLabel = unitOptions.value.find((item) => item.value === unit.toLowerCase())?.label;
  return unitLabel;
};
// 获取常量列表
const getUnitList = () => {
  configApi.getConfigListByType(ConfigType.Unit).then((data) => {
    unitOptions.value = data.map((item: any) => {
      return { label: item.codeName, value: item.codeValue };
    });
  });
};
onMounted(() => {
  getInfo();
  getUnitList();
  // handleTotal();
});
</script>

<style scoped>
.el-table {
  --el-table-border-color: #e5e7eb;
  --el-table-header-bg-color: #f0f7ff;
  --el-table-row-hover-bg-color: #f3f4f6;
}

.el-table th {
  font-weight: 600;
}

.el-pagination {
  justify-content: flex-end;
}
</style>
